<template>
    <div>
        <el-card class="box-card-left">
            <div slot="header" class="clearfix leftHeader">
                <span>版本号</span>
            </div>
            <div  class="text item blue" @click='newVersion'>
                +&nbsp;新增
            </div>
            <div  class="text item" @click="versionDetailsCheck">
                <img src="@/images/assets/icon/goldenPentagram.png" />&nbsp;&nbsp;V1.0.5
            </div>
            <div  class="text item" @click="versionDetailsCurrent">
                <img src="@/images/assets/icon/bluePentagon.png" />&nbsp;&nbsp;V1.0.6
            </div>
            <div v-for="o in 4" :key="o" class="text item" @click="versionDetailsNormal('V1.0. ' + o )">
                {{'V1.0. ' + o }}
            </div>
            <div  class="text item" @click="versionDetailsNormal('初始版本')">
                初始版本
            </div>
        </el-card>
        <!-- 新增版本 -->
        <el-card class="box-card-right" v-if="rightBoxNewVersion">
            <div slot="header" class="clearfix leftHeader">
                <span>新增版本</span>
            </div>
            <el-form ref="form" :model="form" label-width="80px">
                <el-row :gutter="23">
                    <el-col :span="23">
                        <el-form-item label="版本号"  label-width='90px'>
                            <el-row :gutter="10">
                                <el-col :span="4">
                                    <el-input v-model="form.name1" size='small' maxlength='2'></el-input>
                                </el-col>
                                <el-col :span="4">
                                    <el-input v-model="form.name2" size='small' maxlength='2'></el-input>
                                </el-col>
                                <el-col :span="4">
                                    <el-input v-model="form.name3" size='small' maxlength='2'></el-input>
                                </el-col>
                                <el-col :span="5">
                                    V&nbsp;{{form.name1||0}}.{{form.name2||0}}.{{form.name3||0}}
                                </el-col>
                            </el-row>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="23">
                    <el-col :span="23">
                        <el-form-item label="上传程序包" label-width='90px'>
                            <el-button type="primary"  size='small'>选择文件</el-button>
                            <br /><span class="fontProgram100M">请选择需要上传的程序包，大小不超过100M</span>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="23">
                    <el-col :span="23">
                        <el-form-item label="URL地址" label-width='90px'>
                            <el-input v-model="form.name" size='small' placeholder="请输入应用访问的URL地址"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="23">
                    <el-col :span="23">
                        <el-form-item label="版本说明" label-width='90px'>
                            <el-input type="textarea" v-model="form.desc"  placeholder="请简单描述应用的功能，内容不超过200字。">
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="18">
                    <el-col :span="18">
                        <el-form-item label="" label-width='90px'>
                            <el-button type='primary' class="buttonLongWidth">
                                发布
                            </el-button>
                        </el-form-item>
                    </el-col>
                </el-row>

            </el-form>
        </el-card>
        <!-- 当前版本 -->
        <el-card class="box-card-right" v-if="rightBoxVersionDetailsCurrent">
            <div slot="header" class="clearfix leftHeader">
                <span>版本详情</span>
            </div>
            <el-form ref="form" :model="form" label-width="80px">
                <el-row :gutter="23">
                    <el-col :span="23">
                        <el-form-item label="版本号">
                            V 1.0.6
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="23">
                    <el-col :span="23">
                        <el-form-item label="程序包" >
                            xlqd.zip
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="23">
                    <el-col :span="23">
                        <el-form-item label="URL地址">
                            http://10.201.90.2/8080/index.html
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="23">
                    <el-col :span="23">
                        <el-form-item label="上传人" >
                            张三
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="23">
                    <el-col :span="23">
                        <el-form-item label="上传时间" >
                            2018-05-31 12:09
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="18">
                    <el-col :span="18">
                        <el-form-item label="">
                            <el-button type='primary'>
                                下架
                            </el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-card>
        <!-- 待审核版本 -->
        <el-card class="box-card-right" v-if="rightBoxVersionDetailsCheck">
            <div slot="header" class="clearfix leftHeader">
                <span>版本详情</span>
            </div>
            <el-form ref="form" :model="form" label-width="80px">
                <el-row :gutter="23">
                    <el-col :span="23">
                        <el-form-item label="版本号">
                            V 1.0.5
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="23">
                    <el-col :span="23">
                        <el-form-item label="程序包" >
                            xlqd.zip
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="23">
                    <el-col :span="23">
                        <el-form-item label="URL地址">
                            http://10.201.90.2/8080/index.html
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="23">
                    <el-col :span="23">
                        <el-form-item label="上传人" >
                            张三
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="23">
                    <el-col :span="23">
                        <el-form-item label="上传时间" >
                            2018-05-31 12:09
                        </el-form-item>
                    </el-col>
                </el-row>

            </el-form>
        </el-card>
        <!-- 普通版本 -->
        <el-card class="box-card-right" v-if="rightBoxVersionDetailsNormal">
            <div slot="header" class="clearfix leftHeader">
                <span>版本详情</span>
            </div>
            <el-form ref="form" :model="form" label-width="80px">
                <el-row :gutter="23">
                    <el-col :span="23">
                        <el-form-item label="版本号">
                            {{versionDetailsNormalNumber}}
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="23">
                    <el-col :span="23">
                        <el-form-item label="程序包" >
                            xlqd.zip
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="23">
                    <el-col :span="23">
                        <el-form-item label="URL地址">
                            http://10.201.90.2/8080/index.html
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="23">
                    <el-col :span="23">
                        <el-form-item label="上传人" >
                            张三
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="23">
                    <el-col :span="23">
                        <el-form-item label="上传时间" >
                            2018-05-31 12:09
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="18">
                    <el-col :span="18">
                        <el-form-item label="">
                            <el-button type='primary'>
                                设为当前版本
                            </el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-card>
    </div>
</template>

<script>
export default {
    data() {
      return {
        form: {
          name: '',
          name1: '',
          name2: '',
          name3: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        boxHidden: false,
        rightBoxNewVersion: true,
        rightBoxVersionDetailsCurrent:false,
        rightBoxVersionDetailsCheck:false,
        rightBoxVersionDetailsNormal:false,
        versionDetailsNormalNumber:'',//普通版本号传值用的
      }
    },
    methods: {
        newVersion(){
            this.rightBoxNewVersion = true;
            this.rightBoxVersionDetailsCurrent = false;
            this.rightBoxVersionDetailsCheck = false;
            this.rightBoxVersionDetailsNormal = false;
        },
        versionDetailsCurrent(){
            this.rightBoxNewVersion = false;
            this.rightBoxVersionDetailsCurrent = true;
            this.rightBoxVersionDetailsCheck = false;
            this.rightBoxVersionDetailsNormal = false;
        },
        versionDetailsCheck(){
            this.rightBoxNewVersion = false;
            this.rightBoxVersionDetailsCurrent = false;
            this.rightBoxVersionDetailsCheck = true;
            this.rightBoxVersionDetailsNormal = false;
        },
        versionDetailsNormal(number){
            this.rightBoxNewVersion = false;
            this.rightBoxVersionDetailsCurrent = false;
            this.rightBoxVersionDetailsCheck = false;
            this.rightBoxVersionDetailsNormal = true;
            this.versionDetailsNormalNumber = number;
        },
    },
    mounted() {
        let allVersionDiv = document.getElementsByClassName('el-card__body')[0];
        setTimeout(()=>{console.log(allVersionDiv.children.length);},500);
        
    }
}

</script>

<style scoped>
  .text {
    font-size: 14px;
    text-align: center;
    border-bottom: 1px solid #DCDFE6;
  }
  .blue{
      color: #409EFF;
  }
  .item {
    margin-bottom: 18px;
    cursor: pointer;
  }
  .item:hover{
      background: #DCDFE6;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
  .leftHeader,.el-card__header{
      background: #DCDFE6;
      text-align: center;
      padding: 0;
  }
  .box-card-left {
    width: 150px;
    overflow: hidden;
    float: left;
    margin-right: 10px;
  }
  .box-card-right {
    width: 470px;
  }
  
</style>
